Moving background pictures around

            <div class="main_A">
                <div class="d1"></div>
                <div class="d2"></div>
                <div class="d3"></div>
                <div class="d4"></div>
                <style>
                    .main_A {height: 50vh; width: 100vw; position: relative;}
                    .d1 {position: absolute; margin-top: 1vw; background-image: url("../images/2.jpg"); background-size: 40vw 25vw; height: 30vh;  width: 15vw;
                    background-position: 0 50%; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8); top: 50%; transform: translateY(-50%); z-index: 2; 
                     animation: dd1 10s 4, dd12 10s 4;  animation-delay: 4s, 4s;}
                    .d2 {position: absolute; margin-top: 5vw; background-image: url("../images/3.jpg"); background-size: 26vw 44vw; height: 25vh; width: 20vw; 
                    background-position: -10vw 50%; left: 10vw; top: 50%; transform: translateY(-50%); z-index: 1; animation: dd2 10s 5; animation-delay: 4s;}
                    .d3 {position: absolute;margin-top: 1vw; background-image: url("../images/4.jpg"); background-size: 50vw 52vw; overflow: hidden; height: 34vh;
                     width: 35vw; left: 25vw; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8); background-position: -35vw 50%; top: 50%; transform: translateY(-50%);
                        z-index: 3; animation: dd3 5s 7; animation-delay: 4s;}
                    .d4 {position: absolute; margin-top: 5vw; overflow: hidden; background-image: url("../images/5.jpg"); background-size: 20vw 35vw; height: 30vh;
                     width: 50vw; left: 40vw; background-position: -70vw 50%; top: 50%; transform: translateY(-50%); z-index: 1; animation: dd4 5s 8;animation-delay: 4s;}

                    @keyframes dd1 {
                        0% {   }
                        50% {width: 100vw;}
                    }
                        @keyframes dd12 {
                        0% { }
                        50% {background-position: Calc(0vw - 40px) 50%;}
                    }
                    @keyframes dd2 {
                        0% { }
                        50% {background-position: Calc(-10vw - 70px) 70%;}
                    }
                    @keyframes dd3 {
                        0% {}
                        50% {background-position: Calc(-35vw + 100px) 70%;}
                    }
                    @keyframes dd4 {
                        0% { }
                        50% {background-position: Calc(-70vw - 150px) 70%;}
                    }
                </style>
            </div>